<template>
  <div class="app-container">

    <el-header style="margin-top: 10px">
      <el-page-header @back="routerBack" content="轨迹详情">
      </el-page-header>
    </el-header>

    <el-amap vid="aMap"
             class="aMap"
             :plugin="plugins"
             :center="center"
             :zoom="zoom"><!--高德地图地图容器组件-->
      <el-amap-polyline
        :path="path"
        :lineJoin="'round'"
        strokeColor="#409EFF"
        strokeOpacity="0.8"
        strokeWeight="5"
        strokeStyle= "solid"
      /><!--轨迹折线-->

      <el-amap-marker
        vid="startMarker"
        :position="startMarker.position"
        title="起点"
      /><!--起点标记-->

      <el-amap-text
        text="起点"
        :position="startMarker.position"
        :offset="[0,-50]"
      /><!--起点文字-->

      <el-amap-marker
        vid="endMarker"
        :position="endMarker.position"
        title="终点"
      /><!--终点标记-->

      <el-amap-text
        text="终点"
        :position="endMarker.position"
        :offset="[0,-50]"
      /><!--终点文字-->

    </el-amap>

    <el-row :gutter="10" style="margin-top: 15px"><!--响应式第一行-->
      <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6">
        <el-input :value="plateNumber | plateNumberFilter" readonly>
          <template slot="prepend">车牌号</template>
        </el-input>
      </el-col>
      <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6">
        <el-input :value="mileage | mileageFilter " readonly>
          <template slot="prepend">里程</template>
        </el-input>
      </el-col>
      <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6">
        <el-input :value="aveAltitude" readonly>
          <template slot="prepend">平均海拔</template>
        </el-input>
      </el-col>
      <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6">
        <el-input :value="estimateFuelConsumptionAll" readonly>
          <template slot="prepend">总耗油（估算）</template>
        </el-input>
      </el-col>
    </el-row>

    <el-row :gutter="10"><!--响应式第二行-->
      <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6">
        <el-input :value="startPoint | pointFilter" readonly>
          <template slot="prepend">起点</template>
        </el-input>
      </el-col>
      <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6">
        <el-input :value="endPoint | pointFilter" readonly>
          <template slot="prepend">终点</template>
        </el-input>
      </el-col>
      <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6">
        <el-input :value="startTime | dateFilter" readonly>
          <template slot="prepend">起点时间</template>
        </el-input>
      </el-col>
      <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6">
        <el-input :value="endTime | dateFilter" readonly>
          <template slot="prepend">终点时间</template>
        </el-input>
      </el-col>
    </el-row>


  </div>
</template>

<script>

import { getList } from '@/api/table'

import {
  plateNumberFilter,
  mileageFilter,
} from "@/utils/globalFilters";

import {
  getPointListByPlateNumberAndDate
} from "@/api/car";

export default {
  computed: {
    // 车牌号
    plateNumber() {
      return this.$route.params.plateNumber; //取从上个页面传递过来的params中的参数
    },
    // 平均海拔
    aveAltitude() {
      let total = 0;
      for (let point of this.pointList) { //遍历出坐标点对象数组里的海拔
        total += point.altitude;
      }
      let ave = total/(this.pointList.length); //求平均
      return ave.toFixed(3)+'米';
    },
    mileage() {
      return this.$route.params.mileage; //取从上个页面传递过来的params中的参数
    },
    // 估算总耗油量（升/百公里）
    estimateFuelConsumptionAll() {
      return ((this.mileage/1000/100)*7.5).toFixed(3)+'升';
    },
    startPoint() {
      return this.path[0];
    },
    endPoint() {
      return this.path[this.path.length-1];
    },
    startTime() {
      if (this.pointList.length===0) return ;
      return this.pointList[0].record_time;
    },
    endTime() {
      if (this.pointList.length===0) return ;
      return this.pointList[this.pointList.length-1].record_time;
    }
  },
  filters: {
    // 将标准UTC时间转为易读的时间
    dateFilter(date){
      let objectDate = new Date(date);
      return objectDate.toLocaleString();
    },
    // 经纬度过滤器
    pointFilter(point){
      if (point===undefined) return ;
      return '经度：'+point[0]+'，纬度：'+point[1];
    },
    plateNumberFilter(plateNumber) {
      return plateNumberFilter(plateNumber);
    },
    mileageFilter(mileage){
      return mileageFilter(mileage);
    }
  },
  data() {
    return {
      plugins:[
        { //地图类型插件（卫星或普通地图）
          pName: 'MapType',
          defaultType: 0, // 0是普通地图，1是卫星。默认是0
        },
        { // 比例尺插件
          pName: 'Scale',
        },
        { // 左侧工具条插件
          pName: 'ToolBar',
        }
      ],
      zoom: 14,  //初始缩放级别（数字越大约精细，最大18）
      center: [104.066143,30.573095],   //地图中心点坐标（默认是成都市政府）
      path:[ //符合高德地图规范的经纬度数组
        // [latitude_amap,longitude_amap]
      ],
      pointList: [  //坐标点对象数组
        /*{ //坐标点对象
          altitude,       //坐标点海拔高度
          latitude_amap,  //坐标点纬度
          longitude_amap, //坐标点经度
          record_time     //坐标点记录的时间
        }*/
      ],
      startMarker: { //起点坐标对象
        position: [104.066143,30.573095] //必须给点标记一个初始坐标，否则会报错（）
      },
      endMarker: { //终点坐标对象
        position: [104.066143,30.573095]
      }
    }
  },
  created() {
    this.fetchData();
  },
  methods: {
    async fetchData() {
      let plateNumber = this.$route.params.plateNumber;
      let date = this.$route.params.date;
      const { data:pointList } = await getPointListByPlateNumberAndDate(plateNumber,date)
      for (let i = 0; i < pointList.length; i++) {
        /*console.log(pointList[i].longitude_amap);  //经度
        console.log(pointList[i].latitude_amap);   //纬度*/
        //将坐标点的经纬度以[经度，纬度]的形式放到path数组里（高德地图规范）
        this.path.push([pointList[i].longitude_amap,pointList[i].latitude_amap]);
      }
      this.pointList = pointList
      this.center = this.path[0]; //将地图中心移动到path数组的起点
      this.startMarker.position = this.path[0]; //起点坐标为path数组的第一个
      this.endMarker.position = this.path[this.path.length-1];  //终点坐标为path数组的最后一个
    },
    // 路由回退
    routerBack(){
      this.$router.go(-1)
    }
  }
}
</script>

<style scoped>

  .aMap {
    height: 600px;
    width: 100%;
  }

  .el-input {
    width: 80%;
  }

  .el-col {
    margin-top: 5px;
    padding: 5px;
  }

</style>
